<template>
    <el-dialog
        title="选择额度申请"
        :visible.sync="dialogVisible"
        width="70%"
    >
        <div>
            <div class="flex-row-center">
                <el-form ref="queryQuotaApplicationForm" :model="queryParams" label-width="auto">
                    <el-form-item label="额度申请编号">
                        <el-input v-model="queryParams.calcSchemeCode" placeholder="请输入额度申请编号"></el-input>
                    </el-form-item>
                </el-form>
                <div class="queryView">
                    <el-button type="primary" @click.stop="handleQuery">搜索</el-button>
                    <el-button @click="resetQuery">重置</el-button>
                </div>
            </div>
            <div>
                <el-table
                    v-loading="loading"
                    :data="list"
                    :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                    <template slot="empty">
                        <el-empty :image-size="50" description="暂无额度申请信息"></el-empty>
                    </template>
                    <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="客户名称" align="center" prop="leaseeName" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="客户类型" align="center" prop="customerTypeStr" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="产品方案" align="center" prop="schemeName" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="租期（月）" align="center" prop="leaseTerm" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="剩余可用台数" align="center" prop="remainingAvailableUnits" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80px" fixed="left">
                        <template v-slot="{row}">
                            <e-button size="mini" type="text" @click="chooseTemplate(row)"
                            >选择
                            </e-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                            @pagination="getList"/>
            </div>

        </div>
    </el-dialog>
</template>

<script>
import {selectQuotaApplication} from "@/api/contractTemplate/otherContractTemplate";

export default {
    data() {
        return {
            loading: false,
            dialogVisible: false,
            queryParams: {
                calcSchemeCode: null,
                pageNum: 1,
                pageSize: 10,
                leaseeId:null,
                isAsc:'desc'
            },
            total: 0,
            list: [],
        }
    },
    computed: {},
    methods: {
        //选择额度申请
        chooseTemplate(row) {
            this.$emit('success', row)
            this.close()
        },
        show(leaseeId) {
            this.queryParams.leaseeId = leaseeId
            this.getList()
            this.dialogVisible = true
        },
        close() {
            this.dialogVisible = false
        },
        resetQuery() {
            this.$refs?.queryQuotaApplicationForm?.resetFields()
            this.queryParams.calcSchemeCode=null
            this.handleQuery()
        },
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 查询测试单表列表 */
        getList() {
            this.loading = true;
            selectQuotaApplication(this.queryParams).then(res => {
                this.list = res.rows;
                this.total = res.total;
            }).finally(() => {
                this.loading = false
            })

        },

    },
    mounted() {

    },

}
</script>

<style lang="scss" scoped>
.queryView {
    position: relative;
    top: -8px;
    margin-left: 30px;
}
</style>
